<template>
    <div class="main-nav">
        <div class="name" :style="{ width: nameWidth }">
            <span v-if="!isCollapse">猎罪图鉴</span>
            <el-icon :size="26" @click="handleToggle(isCollapse)">
                <expand v-if="isCollapse" />
                <fold v-if="!isCollapse" />
            </el-icon>
        </div>
        <el-scrollbar>
            <el-menu class="el-menu-app" :default-active="cRoute.value.path" collapse-transition :collapse="isCollapse">
                <template v-for="(menu, index) in menuRoutes" :key="index">
                    <el-sub-menu v-if="menu.children" :index="menu.route">
                        <template #title><el-icon><setting /></el-icon><span>{{ menu.resName }}</span></template>
                        <template v-for="subMenu in menu.children" :key="subMenu.resCode">
                            <el-sub-menu v-if="subMenu.children" :index="subMenu.route">
                                <template #title><span>{{ subMenu.resName }}</span></template>
                                <template v-for="item in subMenu.children" :key="item.resCode">
                                    <el-menu-item :index="item.route" @click="$router.push(item.route)">{{ item.resName
                                    }}</el-menu-item>
                                </template>
                            </el-sub-menu>
                            <el-menu-item v-else :index="subMenu.route" @click="$router.push(subMenu.route)">
                                <template #title>{{ subMenu.resName }}</template>
                            </el-menu-item>
                        </template>
                    </el-sub-menu>
                    <el-menu-item v-else :index="menu.route" @click="$router.push(menu.route)">
                        <el-icon>
                            <milk-tea />
                        </el-icon>
                        <template #title>{{ menu.resName }}</template>
                    </el-menu-item>
                </template>
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { getCurrentInstance, computed, watch } from 'vue'

defineOptions({
    name: 'mainNav',
})

// 初始化操作
const { appContext } = getCurrentInstance()
const { $router, $store, utils } = appContext.config.globalProperties
const menuRoutes = $store.getters['menu/getMenuRoutes'] // 获取菜单

// 路由处理
let cRoute = $ref(computed(() => $router.currentRoute))
watch(
    cRoute,
    newRoute => {
        console.log(newRoute.name)
        if (newRoute.name === undefined) {
            $router.push(utils.getFirstMenuRoute())
        } else {
            $store.commit('menu/SET_TAG_VIEW_ROUTES', newRoute)
            $store.commit('menu/SET_CURRENT_TAG_VIEWS', newRoute)
        }
    },
    { deep: true, immediate: true }
)

// 展开/收起操作
let isCollapse = $ref(false)
let nameWidth = $ref('100%')
let Emit = defineEmits(['submitToggle'])
let handleToggle = isValue => {
    isCollapse = !isCollapse
    nameWidth = !isValue ? '48px' : '100%'
    Emit('submitToggle', !isValue)
}
</script>

<style scoped lang="scss">
.main-nav {
    height: 100%;

    .name {
        height: 48px;
        border-bottom: 1px solid #dcdfe6;
        background: #fff;

        span {
            display: inline-block;
            height: 48px;
            line-height: 48px;
            font-size: 20px;
            font-weight: bold;
            padding-left: 20px;
        }

        position: relative;

        .el-icon {
            position: absolute;
            top: 12px;
            right: 10px;
            color: rgb(48, 18, 18);
            cursor: pointer;
        }
    }

    .menu-name {
        margin-left: 5px;
    }
}

.el-scrollbar {
    height: calc(100% - 50px);
}

.el-menu-item.is-active {
    background: #ebf0ff;
}

.el-menu-app {
    border-right: none !important;

    .el-menu--collapse {
        width: 48px !important;
    }

    .el-menu-tooltip__trigger,
    .el-tooltip__trigger {
        padding-left: 10px !important;
    }

    &>.el-menu-item {
        padding-left: 10px !important;
    }

    &>li> :deep(.el-sub-menu__title) {
        padding: 0px 0px 0px 10px !important;
    }
}
</style>
